<script setup>
import { ref,onMounted } from 'vue';
import {getCode,Login} from '@/api/login.js'
import {setToken} from '@/utils/auth.js'
import router from '@/router'

const coded = ref('')
//登录数据表单
const loginForm = ref({
  uuid:'',
  code:'',
  username:'',
  password:''
})
//获取验证码
const getCodeAPI = async ()=>{
  const {data} = await getCode()
  coded.value = data.img
  loginForm.value.uuid = data.uuid
  console.log(data)
}
//点击登录
const LoginAPI = async()=>{
const res = await Login(loginForm.value)
setToken(res.data.token)
router.push('/')
console.log(res.data.token)
}
//钩子函数
onMounted(()=>{
  getCodeAPI()
})
</script>
<template>
  <div class="container-demo">
    <el-row class="demo-center">
      <el-col :span="14">
        <img src="@/assets/images/login-l.png" alt="">
      </el-col>
      <el-col :span="10">
        <el-row justify="center" align="middle"  style="margin: 50px 0;">
          <div><img style="width: 33px;height: 36px;" src="@/assets/images/login-logo.png" alt=""></div><span>客达天下</span>
        </el-row>
        <el-row justify="center">
          <el-form label-width="100px" v-model="loginForm" rules="loginForm">
            <el-form-item label="账号">
              <el-input v-model="loginForm.username" type="text" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="loginForm.password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="验证码">
              <el-input v-model="loginForm.code" type="text" placeholder="验证码"></el-input>
              <img style="width: 200px;height: 80px;" :src="'data:image/Jpeg;base64,'+coded" alt="验证码">
            </el-form-item>
            <el-form-item>
              <el-button class="isLogin" @click="LoginAPI">登录</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss">
body{
  background-color: rgb(43,48,59);
  .container-demo{
    .demo-center{
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      min-width: 1100px;
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
      vertical-align: middle;
      img{
        width: 100%;
        height: 100%;
      }
      .isLogin{
        display: block;
        width: 100%;
        border-radius: 50px;
        background-color: rgb(5, 204, 149);
        color: #fff;
      }
    }
  }
}
</style>
